// console.log(d3)
const dms = {
    width: 1000,
    height: 500,
    margin: {
        top: 50,
        left: 100,
        right: 100,
        bottom: 50
    }
}
dms.contentWidth = dms.width - dms.margin.left - dms.margin.right;
dms.contentHeight = dms.height - dms.margin.top - dms.margin.bottom;

const box = d3.select('#canvas').append('svg')
    .attr('id', 'box')
    .attr('width', dms.width)
    .attr('height', dms.height)

const content = box.append('g')
    .attr('id', 'content')
    .attr('transform', `translate(${dms.margin.left},${dms.margin.top})`);

// const yesLine = content.append('g')
//     .attr('id', 'yes-line')
//     .attr('transform', `translate(40,-20)`);


function drawChart(dataset) {
    // ...
    const yesGet = d => d.yes;       // 确诊人数
    const countGet = d => d.length;  // 长度

    const yesScale = d3.scaleLinear()
        .domain(d3.extent(dataset, yesGet))
        .range([0, dms.contentWidth])
        .nice();
    console.log(yesScale.domain())

    const histGen = d3.histogram()
        .domain(yesScale.domain()) // 设置或获取直方图的可观测区间
        .value(yesGet)    // 设置或获取直方图值访问器
        .thresholds(10);  // 设置直方图阈值生成方式 10个区间

    const histData = histGen(dataset)  // 获取想要的数据

    console.log(histData)
    console.log(d3.max(histData, countGet))

    const histScale = d3.scaleLinear()
        .domain([0, d3.max(histData, countGet)])
        .range([dms.contentHeight, 0])
        .nice();

    const barArea = content.append('g')
        .attr('id', 'bar-area')
        .style('fill', 'blue')


    const barPadding = 4

    barArea.selectAll('rect')
        .data(histData)
        .join('rect')
        .attr('x', d => yesScale(d.x0) + barPadding / 2)
        .attr('y', d => histScale(countGet(d)))
        .attr('width', d => yesScale(d.x1) - yesScale(d.x0) - barPadding)// 初始长宽是100
        .attr("height", 0)// 初始长宽是1
        .transition()// 设置过渡
        .duration(750)// 过渡持续时间
        .delay(function (d, i) { return i * 10; })// 过渡延迟，自定义，让每个元素过渡延迟不同
        .attr("width", d => yesScale(d.x1) - yesScale(d.x0) - barPadding)
        .attr("height", d => dms.contentHeight - histScale(countGet(d)))// 过渡后长宽为300


    barArea.selectAll('text')
        .data(histData.filter(d => countGet(d)))
        .join('text')
        .attr('x', d => (yesScale(d.x1) + yesScale(d.x0)) / 2 - 5)
        .attr('y', d => histScale(countGet(d)) - 15)
        .text(d => countGet(d))
        .style('stroke', 'dimgray')
    // .style('letter-spacing', '2px')
    // .style('writing-mode', 'tb')


    // x 轴
    const xAxisGen = d3.axisBottom()
        .scale(yesScale)
        .ticks(5)   // 显示多少段 

    const xAxis = content.append('g')
        .attr('id', 'x-axis')
        .style('transform', `translate(0px,${dms.contentHeight + 5}px)`);
    xAxis.call(xAxisGen);

    // x轴 文字说明
    xAxis.append('text')
        .attr('id', 'date-title')
        .attr('x', dms.contentWidth / 2)
        .attr('y', 40)
        .style('fill', 'gray')
        .style('font-size', '16px')
        .style('letter-spacing', '5px')
        .text('确诊人数')



    // Y轴 文字说明
    content.append('text')
        .attr('id', 'date-title')
        .attr('x', -20)
        .attr('y', dms.contentHeight / 2)
        .style('fill', 'gray')
        .style('font-size', '16px')
        .style('letter-spacing', '5px')
        .style('writing-mode', 'tb')
        .text('对应天数')

}

d3.json('sh_day.json')
    .then(drawChart);